<template>
  <div class="tourism-info">
    <div class="tatols">
        <div class="total">
          <img src="../../../public/imgs/icon5.png" alt="" srcset="" />
          <div class="total-item">
            <div class="total-num">{{ selectedTab }}</div>
            <div class="total-text">{{ data[selectedTab].length }} 件</div>
          </div>
        </div>
      </div>
    <div class="details">
      <div class="row header">
        <span style="width: 10%">序号</span>
        <span>来信人</span>
        <span>收信时间</span>
        <span>是否重信</span>
        <span>信件来源</span>
        <span>案件性质</span>
      </div>
      <div class="carousel">
        <div
          class="carousel-inner"
          :style="{ transform: `translateY(-${currentIndex * rowHeight}px)` }"
        >
          <div
            class="row rowList"
            v-for="(item, index) in extendedData"
            :key="index"
            :class="{ 'alt-background': index % 2 !== 0 }"
          >
            <span style="width: 10%">{{ index }}</span>
            <span style="color: #fcc902">{{ item.laixinper }}</span>
            <span style="color: #00ffff">{{ item.shoudate }}</span>
            <span>{{ item.chongxin_text }}</span>
            <span style="color: #ff00ff">{{ item.laiyuan }}</span>
            <span style="color: #c1bd79">{{ item.ajxingzhi }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import dayjs from "dayjs";

  export default {
    data() {
      return {
        tabs: [
          "已受理",
          "七日内回复",
          "已分流",
          "三月内答复",
          "七日内回复超时",
          "三月内答复超时",
        ],
        selectedTab: "已受理",
        currentIndex: 1,
        intervalId: null,
        rowHeight: 54,
        data: {
          已受理: [
            {
              id: 39,
              title: "息诉",
              source_text: "控告类",
              status_text: "危害国家安全罪",
              open: "是",
              help: "是",
            },
          ],
        },
      };
    },
    computed: {
      displayedData() {
        return this.data[this.selectedTab];
      },
      extendedData() {
        if (this.displayedData.length > 0) {
          return [
            this.displayedData[this.displayedData.length - 1],
            ...this.displayedData,
            this.displayedData[0],
          ];
        }
        return [];
      },
    },
    methods: {
      formatTimestamp(timestamp) {
        return dayjs(timestamp * 1000).format("YYYY-MM-DD HH:mm");
      },

      selectTab(tab) {
        this.selectedTab = tab;
        this.fetchData(tab);
        this.resetCarousel();
      },
      fetchData(tab) {
        const tabMap = {
          已受理: 1,
          七日内回复: 2,
          三月内答复: 4,
          已分流: 3,
          七日内回复超时: 5,
          三月内答复超时: 6,
        };
        const nature = tabMap[tab];
        this.$axios
          .get(`/api/screen/middleCharts`, { params: { type: nature } })
          .then((res) => {
            console.log("API Response:", res.data);
            if (res.data.code === 1) {
              this.data[tab] = res.data.data;
            } else {
              console.error("Failed to fetch data:", res.data.message);
            }
          })
          .catch((error) => {
            console.error("Failed to fetch data:", error);
          });
      },
      resetCarousel() {
        clearInterval(this.intervalId);
        this.currentIndex = 1;
        this.startCarousel();
      },
      startCarousel() {
        this.intervalId = setInterval(() => {
          this.currentIndex++;
          if (this.currentIndex >= this.extendedData.length - 7) {
            setTimeout(() => {
              this.currentIndex = 1;
            }, 500);
          }
        }, 2000);
      },
    },
    mounted() {
      this.fetchData(this.selectedTab);
      this.startCarousel();
    },
    beforeUnmount() {
      clearInterval(this.intervalId);
    },
  };
</script>
<style scoped>
  .tourism-info {
    width: 1270px;
    height: 430px;
    overflow: hidden;
    color: #fff;
  }

  .tabs {
    display: flex;
    font-size: 25px;
    margin-top: 5px;
    margin-left: 14px;
  }
  .details {
    height: 100%;
    margin-top: 5px;
  }

  .carousel {
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
  }

  .carousel-inner {
    transition: transform 0.5s ease;
    font-size: 24px;
    background-color: rgba(29, 124, 221, 0.2);
  }

  .rowList {
    height: 54px;
    line-height: 1.5;
  }

  .row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 54px;
    font-size: 12px;
  }

  .row span {
    display: inline-block;
    width: 25%;
    text-align: center;
  }

  .row.alt-background {
    background-color: rgba(67, 133, 204, 0.4);
  }

  .header {
    height: 50px;
    position: sticky;
    top: 0;
    background-color: rgba(3, 118, 177, 0.4);
  }

  .red {
    color: red;
  }
  .tatols {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 160px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    margin-left: 14px;
    margin-right: 14px;
    font-size: 32px;

    .total {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      img {
        margin-left: 10px;
        width: 40px;
        height: 40px;
      }
      .total-item {
        width: 100px;
        margin-left: 5px;
        font-size: 14px;
      }
    }
  }
</style>
